import React, { useEffect, useState } from 'react'
import { Card, Row, Col, Typography, Space, Button, message } from 'antd'
import {
  DashboardOutlined,
  CompassOutlined,
  ExperimentOutlined,
  RadarChartOutlined
} from '@ant-design/icons'

const { Text } = Typography

interface DataMap {
  [key: string]: number
}

// declare global {
//   interface Window {
//     opcua: {
//       onDataChanged: (callback: (data: { nodeId: string; value: number }) => void) => void
//     }
//   }
// }

const OPCUAStatusBar: React.FC = () => {
  const [data, setData] = useState<DataMap>({
    Temperature: 0,
    Angle: 0,
    Vacuum: 0,
    Magnetism: 0
  })

  useEffect(() => {
    window.opcua.onDataChanged(({ nodeId, value }) => {
      const id = nodeId.split(';').pop() // e.g., s=Temperature
      if (id) {
        setData((prev) => ({
          ...prev,
          [id.replace('s=', '')]: value
        }))
      }
    })
  }, [])

  return (
    <Card size="small" style={{ borderRadius: 6}}>
      <Row gutter={[24, 12]} justify="center">
        <Col>
          <Space>
            <DashboardOutlined style={{ fontSize: 20, color: '#fa541c' }} />
            <Text strong>温度:</Text>
            <Text>{data.Temperature?.toFixed(2)} ℃</Text>
          </Space>
        </Col>

        <Col>
          <Space>
            <CompassOutlined style={{ fontSize: 20, color: '#1890ff' }} />
            <Text strong>角度:</Text>
            <Text>{data.Angle?.toFixed(2)} °</Text>
          </Space>
        </Col>

        <Col>
          <Space>
            <ExperimentOutlined style={{ fontSize: 20, color: '#722ed1' }} />
            <Text strong>真空度:</Text>
            <Text>{data.Vacuum?.toFixed(0)} Pa</Text>
          </Space>
        </Col>

        <Col>
          <Space>
            <RadarChartOutlined style={{ fontSize: 20, color: '#52c41a' }} />
            <Text strong>磁场:</Text>
            <Text>{data.Magnetism?.toFixed(3)} mT</Text>
          </Space>
        </Col>
      </Row>
    </Card>
  )
}

export default OPCUAStatusBar
